/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View, Image, TextInput} from 'react-native';

const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
  android:
    'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});

type Props = {};

class Student extends Component{
  render(){
    return(
      <View>
        <Text style={styles.text}>{this.props.name}</Text>
        <Text style={styles.text}>{this.props.age}</Text>
        <Text style={styles.text}>{this.props.tel}</Text>
      </View>
    )
  }
}

export default class App extends Component<Props> {
  constructor(){
    super();
    this.state={
      startime:0,
      time:20,
      students:[
        {name:'张三',age:'18',tel:'13668342586'},
        {name:'李四',age:'86',tel:'41312313211'},
        {name:'王五',age:'75',tel:'45456465465'}
      ],
      text:''
    }
    methods={

    }
    // 设置定时器，三秒之后将张三变成张三三
    setTimeout(() => {
      this.setState(()=>{
        return{
          students:[
            {name:'张三三',age:'18',tel:'13668342586'},
            {name:'李四',age:'86',tel:'41312313211'},
            {name:'王五',age:'75',tel:'45456465465'}
          ]
        }
      })
    }, 3000);

    //倒计时
    var timer = setInterval(() => {
      
      if(this.state.time==0){
        clearInterval(timer)
        var dd = 0
      }else{
        var dd = this.state.time - 1
      }

      var startime = this.state.startime+1;


      this.setState(()=>{
        return{
          time:dd,
          startime:startime
        }
      })
    }, 1000);

  }
  render() {
    return (
      <View style={styles.container}>
      <Text style={styles.text}>倒计时：{this.state.time}{this.state.startime}</Text>
      {
        this.state.students.map((item)=>{
          return(
            <Student name={item.name} age={item.age} tel={item.tel} />
          )
        })
      }
          
      <Image 
        style={[this.state.startime % 2 ==0 ? styles.imgnoact : '']}
        source={require('./resource/image/头像19.png')}
        onLoadStart={() => {console.log('图片开始加载!!!!!!哈哈哈哈')}}
        onLoad={(e) => {console.log('图片加载完毕!!!!哈哈哈')}}



      >

      </Image> 
      <TextInput
        style={styles.inputbox}
        onChangeText={(text) => {
          this.setState({text})
          console.log(this.state.text)
        }}
        value={this.state.text}
        placeholder='请输入电话号码'
        onFocus={()=>{
          console.log('获取焦点 !!!')
          // keyboardType:numeric
          keyboardType="number-pad"
        }}
      ></TextInput>
      <Text>{this.state.text}</Text>
      </View>

    );
  }
}


const styles = StyleSheet.create({
  container: {
    backgroundColor: '#F5FCFF',
    fontSize: 30,
  },
  text:{
    fontSize: 30,
  },
  imgnoact:{
    display: 'none'
  },
  inputbox:{
    width: '100%',
    height: 60,
    borderColor: 'gray', 
    borderWidth: 1,
    fontSize: 28
  }
});

